<template>
  <div class="box">
    <div class="container">
      <div class="search-box">
        <div class="search-top-box" :style="moreSearchShow?'height:200px;overflow-y:auto':''">
          <div class="search-top-left-box">
            <el-form ref="div" :inline="true" label-width="100px" :model="formSearch" class="demo-form-inline">
              <el-form-item label="关键词">
                <el-input clearable class="form-width" v-model="formSearch.keyword" placeholder=""></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="search-top-right-box">
            <p v-if="showOpne" @click="moreSearch">{{moreSearchShow?'收起':'展开'}}<i
                :class="moreSearchShow?'el-icon-arrow-up':'el-icon-arrow-down'"></i></p>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="primary" @click="dialogVisible=true">新增主体</el-button>
          </div>
        </div>
      </div>
      <el-table v-loading="pageLoading" :header-cell-style="{background:'#FAFBFC',color:'#828A9D',textAlign:'center'}"
        :cell-style="{textAlign:'center',color:'#1B2431'}" :data="tableData" style="width: 100%;">
        <el-table-column prop="company_name" label="公司名称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="type" label="类型" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="account_name" label="账户名称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="account_number" label="账号" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="opening_bank" label="开户行" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="Tax_ID" label="税号" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="address" label="地址" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="tel" label="电话" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="250">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="editFunc(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="delCompanyFunc(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination class="el-pagination" @current-change="handleCurrentChange" :current-page="page" :page-size="num"
      layout="prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 添加 -->
    <el-dialog :title="addForm.company_id?'编辑主体':'新增主体'" :visible.sync="dialogVisible" width="450px">
      <el-form :rules="rules" label-position="right" label-width="80px" ref="addForm" :model="addForm">
        <el-form-item label="主体名称" prop="company_name">
          <el-input v-model="addForm.company_name"></el-input>
        </el-form-item>
        <el-form-item label="主体类型" prop="type">
          <el-radio-group v-model="addForm.type">
            <el-radio :label="1">公户</el-radio>
            <el-radio :label="2">私户</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="账号名称" prop="account_name">
          <el-input v-model="addForm.account_name"></el-input>
        </el-form-item>
        <el-form-item label="主体账号" prop="account_number">
          <el-input v-model="addForm.account_number"></el-input>
        </el-form-item>
        <el-form-item label="开户行" prop="opening_bank">
          <el-input v-model="addForm.opening_bank"></el-input>
        </el-form-item>
        <el-form-item label="税号" prop="Tax_ID">
          <el-input v-model="addForm.Tax_ID"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="addForm.address"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input v-model="addForm.tel"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="addLoading" @click="dialogVisible = false">取 消</el-button>
        <el-button :loading="addLoading" type="primary" @click="addSubmitFunc('addForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import companyApi from '@/api/companyApi'
  export default {
    name: '',
    components: {},
    data() {
      return {
        page: 1,
        num: 10,
        total: 0,
        tableData: [],
        formSearch: {
          keyword: ""
        },
        moreSearchShow: false,
        showOpne: false,
        dialogVisible: false,
        addForm: {
          company_name: '',
          type: '',
          account_name: '',
          account_number: '',
          opening_bank: '',
          Tax_ID: '',
          address: '',
          tel: '',
        },
        rules: {
          company_name: [
            { required: true, message: '请输入主体名称', trigger: 'blur' },
          ],
          type: [
            { required: true, message: '请选择主体类型', trigger: 'blur' },
          ],
          account_name: [
            { required: true, message: '请输入账号名称', trigger: 'blur' },
          ],
          account_number: [
            { required: true, message: '请输入主体账号', trigger: 'blur' },
          ],
          opening_bank: [
            { required: true, message: '请输入开户行', trigger: 'blur' },
          ],
          Tax_ID: [
            { required: true, message: '请输入税号', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '请输入地址', trigger: 'blur' },
          ],
          tel: [
            { required: true, message: '请输入电话', trigger: 'blur' },
          ],
        },
        addLoading: false,
        pageLoading: false
      }
    },
    computed: {

    },
    watch: {
      dialogVisible(val1, val2) {
        if (!this.dialogVisible) {
          this.$refs['addForm'].resetFields();
          this.$refs['addForm'].clearValidate();
        }
      },
    },
    destroyed() {
      window.onresize = null;
    },
    mounted() {
      this.$once('hook:beforeDestroy', function () {
        window.onresize = null;
      })
      this.onresize(); //监听搜索容器变化
      window.onresize = () => {
        this.onresize(); //监听搜索容器变化
      }
      this.getCompanyList();
    },
    methods: {
      // 搜索
      onSearch() {
        this.page = 1;
        this.getCompanyList();
      },
      // 翻页
      handleCurrentChange(page) {
        this.page = page;
        this.getCompanyList();
      },
      onresize() {
        let inter = '';
        clearTimeout(inter)
        inter = setTimeout(() => {
          if (!this.$refs.div) return;
          let height = this.$refs.div.$el.offsetHeight;
          height > 70 ? this.showOpne = true : this.showOpne = false;
          this.moreSearchShow = false;
        }, 1000);
      },
      moreSearch() {
        this.moreSearchShow = !this.moreSearchShow;
      },
      // 添加主体
      addSubmitFunc(formName) {
        let addForm = this.addForm;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (addForm.company_id) {
              this.updCompany(addForm);
              return;
            }
            this.addCompany(addForm);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 公司列表
      getCompanyList() {
        this.pageLoading = true;
        companyApi.getCompanyList({
          page: this.page,
          num: this.num,
          keyword: this.formSearch.keyword
        }).then(res => {
          this.pageLoading = false;
          console.log(res, "公司列表")
          if (res.code == 200) {
            this.tableData = res.data.list;
            this.total = res.data.max;
          } else {
            this.$message.warning(res.message);
          }
        }).catch(err => {
          this.$message.warning(err.message);
          this.pageLoading = false;
        })
      },
      // 添加主体请求
      addCompany(data) {
        this.addLoading = true;
        companyApi.addCompany(data).then(res => {
          console.log(res, "添加公司")
          this.addLoading = false;
          if (res.code == 200) {
            this.dialogVisible = false;
            this.onSearch();
          }
          this.$message({
            type: res.code == 200 ? 'success' : 'warning',
            message: res.message
          })
        }).catch(err => {
          this.addLoading = false;
          this.$message.warning(err.message);
        })
      },
      // 修改主体请求
      updCompany(data) {
        this.addLoading = true;
        companyApi.updCompany(data).then(res => {
          console.log(res, "修改公司")
          this.addLoading = false;
          if (res.code == 200) {
            this.dialogVisible = false;
            this.getCompanyList();
          }
          this.$message({
            type: res.code == 200 ? 'success' : 'warning',
            message: res.message
          })
        }).catch(err => {
          this.addLoading = false;
          this.$message.warning(err.message);
        })
      },
      // 编辑
      editFunc(row) {
        companyApi.getCompanyDetail({
          company_id: row.id
        }).then(res => {
          console.log(res, "详情")
          if (res.code == 200) {
            this.addForm = {
              company_name: res.data.company_name,
              type: res.data.type,
              account_name: res.data.account_name,
              account_number: res.data.account_number,
              opening_bank: res.data.opening_bank,
              Tax_ID: res.data.Tax_ID,
              address: res.data.address,
              tel: res.data.tel,
              company_id: row.id
            }
            this.dialogVisible = true;
          } else {
            this.$message.warning(res.message);
          }
        }).catch(err => {
          this.$message.warning(err.message);
        })
      },
      // 删除主体
      delCompanyFunc(row) {
        this.$confirm('此操作将永久删除该主体, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          companyApi.delCompany({
            company_id: row.id
          }).then(res => {
            if (res.code == 200) {
              this.getCompanyList();
            }
            this.$message({
              type: res.code == 200 ? 'success' : 'warning',
              message: res.message
            })
          }).catch(err => {
            this.$message.warning(err.message);
          })
        }).catch(() => {

        });
      }

    }
  }

</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>